<template>
    <el-dialog v-model="dialogGroupManagerListVisible" 
    :width="580"
    :heiht="462"
    destroy-on-close :title="title" center class="dialog-container"
        :before-close="close">
        <div class="group-manager-list-container">
            <div class="small-title">
                {{ $t('groupAdministrator') }} ({{ groupManagerList.length }}/5）
            </div>
            <div v-for="item in groupManagerList" :key="item.userId" class="v-for-item">
                <div class="v-for-item-left">
                    <img :src="item.img" class="v-for-item-left-icon" />
                    <span class="v-for-item-left-name">{{ item.nickname }}</span>
                </div>
                <img src="@/assets/images/groupmanager/close-circle.png" class="v-for-item-right-icon"
                    @click="deleteManager(item)" />
            </div>
            <span slot="footer" class="dialog-footer">
                <button v-if="groupManagerList.length < 5" class="add-manager" @click="addManager">{{
                        $t('groupAddAdministrator')
                }}</button>
                <button v-else class="add-manager-disable">{{ $t("groupAddAdministrator") }}</button>
            </span>
        </div>

    </el-dialog>
</template>
<script>
import {
    defineComponent,
    computed,
    onMounted,
    onBeforeUnmount,
    reactive
} from 'vue'
import { useStore } from "vuex";
import { ElMessage } from 'element-plus'
import {
    ADD_GROUP_MANAGER_LIST,
    PANEL_HEADER_LIST_VISIBLE,
    PANEL_HEADER_LIST_VISIBLE_OPEN,
    BATCH_REMOVE_MANAGER,
    QUERY_GROUP_MANAGER_LIST,
    UPDATE_GROUP_MANAGER_LIST,
    FETCH_GROUP_MEMBER_LIST,
} from "@/store/actiontypes";
export default defineComponent({
    props: {
        title: {
            type: String,
            default: "设置管理员",
        },
        width: {
            type: String,
            default: "40%",
        },
        cancelShow: {
            type: Boolean,
            default: true,
        },
        confirmShow: {
            type: Boolean,
            default: true,
        },
        okBtnText: {
            type: String,
            default: "确定",
        },
    },
    setup(props, context) {
        //console.log("list组件重新调用", props, context)
        const store = useStore();
        onMounted(()=>{
            init()
        })
        const init = () => {
            store.dispatch(QUERY_GROUP_MANAGER_LIST, {
                groupId: store.state.chat.currentSession.targetId,
                nickName: '',
            })
        }
        //组件卸载的时候 重置state状态
        onBeforeUnmount(() => {
            close()
        });
        const close = () => {
            store.commit(ADD_GROUP_MANAGER_LIST, {
                dialogGroupManagerListVisible: false
            });
        }
        const addManager = () => {
            store.commit(PANEL_HEADER_LIST_VISIBLE, {
                panelHeaderListSelectVisible: PANEL_HEADER_LIST_VISIBLE_OPEN
            })   
        }
        //删除管理员
        const deleteManager = (item) => {
            // console.log("item", JSON.stringify(item))
            store.dispatch(BATCH_REMOVE_MANAGER, {
                groupId: item.groupId,
                userIdList: [item.userId]
            })
        }
        //控制是否打开弹窗
        const dialogGroupManagerListVisible = computed(() => {
            return store.state.dialogue.dialogGroupManagerListVisible
        })
        const groupManagerList = computed(() => {
            // const groupMemberList = store.state.chat.groupMemberList.filter((item) => {
            //     return item.isManager
            // })
            // store.state.chat.groupManagerList
            return store.state.chat.groupManagerList
        })
        return {
            dialogGroupManagerListVisible: dialogGroupManagerListVisible,
            groupManagerList,
            close,
            addManager,
            deleteManager
        }
    }
})
</script>
<style lang="less" scoped>
.el-dialog__title {
    font-size: 13px;
    color: #303133;
    font-weight: 500;
}

.el-dialog .el-dialog__body {
    width: 100%;
    box-sizing: border-box;

}

.group-manager-list-container {
    height: 462px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    cursor: default;
    overflow: auto;

    //background-color: blue;
    .small-title {
        color: #909399;
        margin-top: 24px;
        font-size: 13px;
    }

    .v-for-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 24px;
        justify-content: space-between;

        .v-for-item-left {
            display: flex;
            flex-direction: row;

            .v-for-item-left-icon {
                width: 30px;
                height: 30px;
                border-radius: 15px;
            }

            .v-for-item-left-name {
                margin-left: 12px;
            }
        }

        .v-for-item-right-icon {
            width: 14px;
            height: 14px;
        }
    }

    .dialog-footer {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;

        .add-manager {
            width: 130px;
            height: 26px;
            background-color: #5083FC;
            border-radius: 2px 2px 2px 2px;
            // border-color: #5083FC;
            border: none;
            opacity: 1;
            margin-bottom: 30px;
            font-size: 14px;
            text-align: center;
            font-weight: 400;
            color: #fff;
            cursor: pointer;
            //outline: none;
            // -webkit-background-clip: text;
        }

        .add-manager-disable {
            width: 130px;
            height: 26px;
            background-color: #AFC7FF;
            border-radius: 2px 2px 2px 2px;
            // border-color: #5083FC;
            border: none;
            opacity: 1;
            margin-bottom: 30px;
            font-size: 14px;
            text-align: center;
            font-weight: 400;
            color: #fff;
            cursor: not-allowed;
        }
    }
}
</style>